<template>
  <div>
    <zm-tabs
      class="mt15"
      tab-type="card"
      :list="tabsList"
      v-model="activeName"
      v-if="isShowRule"
    ></zm-tabs>
    <components class="mt15 pd10" :is="activeName" v-if="isShowRule" />
    <empty-data class="" v-if="!isShowRule" size="middle" :placeholder="showMsg"></empty-data>
    <!-- <h3 class="fc9" v-if="!isShowRule">暂无数据</h3> -->
  </div>
</template>

<script>
import tableMixin from '@/mixins/zmTableMixin'
import { tabsList, sellRuleTabs } from './const'
import OnlineBaseDetail from './components/OnlineBaseDetail'
import OnlineSpecialDetail from './components/OnlineSpecialDetail'
import OfflineBaseDetail from './components/OfflineBaseDetail'
import OfflineSpecialDetail from './components/OfflineSpecialDetail'
import SellOnlineDetail from './components/SellOnlineDetail'
import SellOfflineDetail from './components/SellOfflineDetail'
import PointCardDetail from './components/PointCardDetail'
import ExpandXinxuanDetail from './components/expandXinxuan'
export default {
  name: 'UseRule',
  inject: ['$detail'],
  components: {
    OnlineBaseDetail,
    OnlineSpecialDetail,
    OfflineBaseDetail,
    OfflineSpecialDetail,
    SellOnlineDetail,
    SellOfflineDetail,
    PointCardDetail,
    ExpandXinxuanDetail
  },
  mixins: [tableMixin],
  data () {
    return {
      activeName: 'OnlineBaseDetail'
    }
  },
  computed: {
    // 兑换范围：1线上，2线下
    exchangeRange () {
      if (this.$detail.infoData.exchangeRange) {
        return this.$detail.infoData.exchangeRange.split(',')
      } else {
        return []
      }
    },
    // 根据兑换范围返回需要展示的tabs：线上、线下
    tabsList () {
      // 卖品券的使用规则模板
      if (this.$detail.infoData.type === '2') {
        return sellRuleTabs().filter((item) =>
          this.exchangeRange.includes(item.value)
        )
      } else {
        return tabsList().filter(item => this.exchangeRange.includes(item.value))
      }
    },
    infoData () {
      return this.$detail.infoData
    },
    isShowRule () {
      if (['1', '2', '5'].includes(this.infoData.type)) {
        return true
      } else if (this.infoData.type === '3' && (this.infoData.businessType.includes('3') || this.infoData.useScope.includes('2'))) {
        return true
      } else {
        return false
      }
    },
    showMsg () {
      if (this.infoData.type === '4') {
        return '次卡规则暂和兑换券规则一致'
      } else {
        return '暂无数据'
      }
    }
  },
  watch: {},
  created () {
    this.init()
  },
  methods: {
    init () {
      if (this.isShowRule) {
        if (+this.infoData.type === 1) {
          if (this.exchangeRange.length === 1) {
            this.activeName = this.exchangeRange[0] === '1' ? 'OnlineBaseDetail' : this.exchangeRange[0] === '2' ? 'OfflineBaseDetail' : 'expandXinxuanDetail'
          } else if (this.exchangeRange.length === 2) {
            if (this.exchangeRange.includes('1')) {
              this.activeName = 'OnlineBaseDetail'
            } else {
              this.activeName = 'OfflineBaseDetail'
            }
          } else {
            this.activeName = 'OnlineBaseDetail'
          }
        } else if (+this.infoData.type === 2) {
          if (this.exchangeRange.length > 1) {
            this.activeName = 'SellOnlineDetail'
          } else {
            this.activeName = this.exchangeRange[0] === '1' ? 'SellOnlineDetail' : 'SellOfflineDetail'
          }
        } else if (+this.infoData.type === 3) {
          this.activeName = 'PointCardDetail'
        } else {
          if (this.exchangeRange.length > 1) {
            this.activeName = 'OnlineBaseDetail'
          } else {
            this.activeName = this.exchangeRange[0] === '1' ? 'OnlineBaseDetail' : 'OfflineBaseDetail'
          }
        }
      }
    }
  }
}
</script>

<style scoped lang='scss'>

</style>
